<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="box">
        
        <div class="images">
            <el-image style="width: 300px;" :src="require('@/assets/images/platform.png')"></el-image>
            <div class="robot-shadow" style=""></div>
            <el-image class="robot" :src="require('@/assets/images/robot.png')"></el-image>
        </div>

        <div class="tip-title">{{job.message || "正在智能抓取中，请等待..."}}</div>

        <div style="display: flex;justify-content: center;">
            <info-tip tipText="智能导入可能需要较长时间，任务已在后台运行，关闭此窗口不影响数据导入"></info-tip>
        </div>

        
        <!-- <div class="tips">由于受网络情况影响，可能会导入失败，通过<span class="proxy-btn" @click="showProxySet = true">设置代理IP</span>可有效提高成功率</div> -->

        <!-- <AiProxyConfig :show.sync="showProxySet" @cancle="showProxySet = false" @success="proxysetsuccess"></AiProxyConfig> -->
    </div>
</template>

<script>
import AiProxyConfig from "@/components/AiProxyConfig/index.vue";
export default {
    name: 'importing',
    data() {
        return {

            showProxySet: false,
        }
    },
    components: { AiProxyConfig },
    props: {

        job: {
            type: Object,
            default: null
        }
    },
    watch: {

    },
    methods: {
        proxysetsuccess(){
            this.showProxySet = false;
            this.$emit('proxysetsuccess')
        }
    },
    mounted: function () {

    }

}
</script>

<style scoped>
.box {
    text-align: center;
}

.tip-title {
    font-size: 18px;
    color: #333333;
    margin-bottom: 40px;
}

.images {
    margin: 80px auto 40px auto;
    position: relative;
}

.robot {
    width: 100px;
    position: absolute;
    right: 220px;
    top: -30px;
    animation: swingUpDown 1.5s infinite;
}

@keyframes swingUpDown {

    0%,
    100% {
        top: -30px;
        animation-timing-function: ease-in-out;
    }

    50% {
        top: -50px;
        animation-timing-function: ease-out;
    }
}

.robot-shadow {
    width: 100px;
    height: 50px;
    background: radial-gradient(ellipse at center, black 30%, transparent 70%);
    transform: rotate(25deg);
    position: absolute;
    right: 220px;
    bottom: 80px;
    animation: shadowUpdate 1.5s infinite;
}

@keyframes shadowUpdate {

    0%,
    100% {
        opacity: 0.5;
        animation-timing-function: ease-in-out;
    }

    50% {
        opacity: 0.1;
        animation-timing-function: ease-out;
    }
}

.tips {
    font-size: 12px;
    color: #666666;
}
.proxy-btn{
    cursor: pointer;
    color: #409eff;
}
</style>